<template>
    <div class="appointment-tow">
        <div class="header-box">
            <div class="title">预约记录</div>
        </div>

        <div class="tab-box">
            <el-tabs v-model="activeName" @tab-click="handlecheTab(false)">
                <el-tab-pane label="全部" name="1">
                    <appointmentList
                        ref="appointmentList1"
                        :searchform="searchform1"
                        :list_data="list_data1"
                        :shop_ls_data="shop_ls_data"
                        :group_data="group_data"
                        :search_type_data="search_type_data"
                        :worker_ls_data="worker_ls_data"
                        :activeName="activeName"
                        @searchList="searchList"
                        @changeList="changeList"
                        @loadFun="loadFun"
                        @getDetailFun="getDetailFun"
                        @cheSelectvalue="cheSelectvalue"
                        @cheOptionvalue="cheOptionvalue"
                    ></appointmentList>
                </el-tab-pane>
                <el-tab-pane label="待预约" name="3">
                    <appointmentNoList
                        ref="appointmentList3"
                        :searchform="searchform3"
                        :list_data="list_data3"
                        :shop_ls_data="shop_ls_data"
                        :group_data="group_data"
                        :ucp_ls_data="ucp_ls_data"
                        :search_type_data="search_type_data"
                        :activeName="activeName"
                        :is_acitve_id="is_acitve_id"
                        @searchList="searchList"
                        @changeList="changeList"
                        @loadFun="loadFun"
                        @getRecordList="getRecordList"
                        @goAppointment="goAppointment"
                        @cheSelectvalue="cheSelectvalue"
                        @cheOptionvalue="cheOptionvalue"
                    ></appointmentNoList>
                </el-tab-pane>
                <el-tab-pane label="待确认" name="2">
                    <appointmentList
                        ref="appointmentList2"
                        :confirm_ls="confirm_ls"
                        :searchform="searchform2"
                        :list_data="list_data2"
                        :shop_ls_data="shop_ls_data"
                        :group_data="group_data"
                        :search_type_data="search_type_data"
                        :worker_ls_data="worker_ls_data"
                        :activeName="activeName"
                        @searchList="searchList"
                        @changeList="changeList"
                        @loadFun="loadFun"
                        @getDetailFun="getDetailFun"
                        @cheSelectvalue="cheSelectvalue"
                        @cheOptionvalue="cheOptionvalue"
                    ></appointmentList>
                </el-tab-pane>
                <el-tab-pane label="待评价" name="4">
                    <appointmentList
                        ref="appointmentList4"
                        :searchform="searchform4"
                        :list_data="list_data4"
                        :shop_ls_data="shop_ls_data"
                        :group_data="group_data"
                        :search_type_data="search_type_data"
                        :worker_ls_data="worker_ls_data"
                        :activeName="activeName"
                        @searchList="searchList"
                        @changeList="changeList"
                        @loadFun="loadFun"
                        @getDetailFun="getDetailFun"
                        @cheSelectvalue="cheSelectvalue"
                        @cheOptionvalue="cheOptionvalue"
                    ></appointmentList
                ></el-tab-pane>
                <el-tab-pane label="已完成" name="5">
                    <appointmentList
                        ref="appointmentList5"
                        :searchform="searchform5"
                        :list_data="list_data5"
                        :shop_ls_data="shop_ls_data"
                        :group_data="group_data"
                        :search_type_data="search_type_data"
                        :worker_ls_data="worker_ls_data"
                        :activeName="activeName"
                        @searchList="searchList"
                        @changeList="changeList"
                        @loadFun="loadFun"
                        @getDetailFun="getDetailFun"
                        @cheSelectvalue="cheSelectvalue"
                        @cheOptionvalue="cheOptionvalue"
                    ></appointmentList
                ></el-tab-pane>
                <el-tab-pane label="已取消" name="6">
                    <appointmentList
                        ref="appointmentList6"
                        :searchform="searchform6"
                        :list_data="list_data6"
                        :shop_ls_data="shop_ls_data"
                        :group_data="group_data"
                        :search_type_data="search_type_data"
                        :worker_ls_data="worker_ls_data"
                        :activeName="activeName"
                        @searchList="searchList"
                        @changeList="changeList"
                        @loadFun="loadFun"
                        @getDetailFun="getDetailFun"
                        @cheSelectvalue="cheSelectvalue"
                        @cheOptionvalue="cheOptionvalue"
                    ></appointmentList>
                </el-tab-pane>
            </el-tabs>
        </div>
        <appointmentRecord
            ref="appointmentRecord"
            @getDetailFun="getDetailFun"
        ></appointmentRecord>
        <el-dialog
            title="自定义时间范围"
            :visible.sync="dialogVisible"
            width="30%">
            <el-date-picker
                style="width: 100%"
                v-model="time_arr"
                type="datetimerange"
                start-placeholder="开始日期"
                range-separator="至"
                end-placeholder="结束日期"
                @change="timestampFun(time_arr)"
            >
            </el-date-picker>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="[changeList(),dialogVisible = false]">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";
import appointmentList from "./appointmentList.vue";
import appointmentNoList from "./appointmentNoList.vue";
import appointmentRecord from "./appointmentRecord.vue";
import appointmentOverview from "./appointmentOverview.vue";

export default {
    components: {
        appointmentList,
        appointmentNoList,
        appointmentRecord,
        appointmentOverview,
    },
    data() {
        return {
            dialogVisible: false,
            time_arr: [],
            activeName: "1",
            options: [],
            is_type: false,
            is_acitve_id: "",
            searchform1: {
                ch: "5",
                search_type: "1",
                search_kw: "",
                shopid: "",
                staffid: "",
                group: "",
                pfrom: 0,
            },
            searchform2: {
                ch: "41",
                search_type: "1",
                search_kw: "",
                shopid: "",
                staffid: "",
                group: "",
                pfrom: 0,
                days_nbk: "",
                outdays: "",
            },
            searchform3: {
                ch: "2",
                search_type: "1",
                search_kw: "",
                shopid: "",
                uid_cp: "",
                group: "",
                pfrom: 0,
            },
            searchform4: {
                ch: "2",
                search_type: "1",
                search_kw: "",
                shopid: "",
                staffid: "",
                group: "",
                pfrom: 0,
                isremark: "2",
            },
            searchform5: {
                ch: "2",
                search_type: "1",
                search_kw: "",
                shopid: "",
                staffid: "",
                group: "",
                pfrom: 0,
                isremark: "1",
            },
            searchform6: {
                ch: "3",
                search_type: "1",
                search_kw: "",
                shopid: "",
                staffid: "",
                group: "",
                pfrom: 0,
                isremark: "1",
            },

            list_data1: [],
            list_data2: [],
            list_data3: [],
            list_data4: [],
            list_data5: [],
            list_data6: [],

            is_soll_1: false,
            is_soll_2: false,
            is_soll_3: false,
            is_soll_4: false,
            is_soll_5: false,
            is_soll_6: false,

            search_type_data: [
                {
                    name: "按客户",
                    id: "1",
                    is_acitve: true,
                },
                {
                    name: "按服务",
                    id: "2",
                    is_acitve: false,
                },
            ],
            confirm_ls: [{
                name: "待确认到店",
                id: "41",
            },{
                name: "待确认消费",
                id: "42",
            },],
            group_data: [
                {
                    name: "全部日期",
                    id: "",
                },
            ],
            shop_ls_data: [
                {
                    name: "门店",
                    shopid: "",
                    id: "",
                },
            ],
            worker_ls_data: [
                {
                    name: "服务人",
                    id: "",
                    staffid: "",
                },
            ],
            ucp_ls_data: [
                {
                    name: "经手人",
                    id: "",
                    uid: "",
                },
            ],
        };
    },
    methods: {
        initData() {
            this.handlecheTab(false);
        },
        
        //点击概览列表事件处理
        actions(data) {
            this.$emit("actions", data);
        },
        cheSelectvalue(id) {
            let val = this.activeName;
            this[`searchform${val}`].search_type = id;
            this[`searchform${val}`].search_kw = "";
            this.search_type_data.map((v) => {
                if (v.id == id) {
                    v.is_acitve = true;
                } else {
                    v.is_acitve = false;
                }
            });
        },
        
        cheOptionvalue(item, type) {
            let val = this.activeName;
            if (type == 1) {
                this[`searchform${val}`].shopid = item.id;
            } else if (type == 2) {
                this[`searchform${val}`].staffid = item.id;
            } else if (type == 3) {
                this[`searchform${val}`].group = item.id;
                this.groupFun (item)
                return false
            } else if (type == 4) {
                this[`searchform${val}`].uid_cp = item.id;
            } else if (type == 0) {
                this[`searchform${val}`].ch = item.id;
            } else if (type == "tabFilter") {
                console.log(item,type)
                Object.keys(item).forEach(key=> {
                    this[`searchform3`][key] = item[key];
                })
            }
            this.changeList();
        },
        // 选择日期 
        groupFun (item) {
            let val = this.activeName;
            if (item.id == 5) {
                this.dialogVisible = true;
                return
            };
            this[`searchform${val}`].group = item.id;
            this.changeList();
        },
        timestampFun (e,i) {
            let val = this.activeName;
            if(!e || !e.length) return false;
            this[`searchform${val}`].stime = e[0];
            this[`searchform${val}`].dtime = e[1];
        },
        butFun(type) {
            this.$emit("butFun", type);
        },
        // 去预约
        goAppointment(data) {
            this.is_acitve_id = data.projectData[0].proid;
            this.$emit("goAppointment", data);
        },
        //查看预约记录
        getRecordList(id) {
            this.$refs.appointmentRecord.initData(id);
        },
        // 去到详情
        getDetailFun(id, type = false) {
            if (type) {
                this.is_type = type;
            }
            let val = this.activeName;
            this[`list_data${val}`].map((v) => {
                if (v.bookid == id) {
                    v.acitve = true;
                } else {
                    v.acitve = false;
                }
            });
            this.$emit("getDetailFun", id);
        },
        // 重新打开记录对话框
        openDialog() {
            this.$refs.appointmentRecord.dialogVisible = true;
            this.is_type = false;
        },

        //获取概览数据
        getViewData() {
            this.$refs.appointmentOverview.getData();
        },

        // 切换tab
        async handlecheTab(upData) {
            let val = this.activeName;
            if (this[`list_data${val}`].length == 0 || upData) {
                this.getlistData();
            }
            if (this[`list_data${val}`] && this[`list_data${val}`].length > 0) {
                if (val == 3) {
                    let data = {
                        projectData: [this[`list_data${val}`][0].ls[0]],
                        customerInfo: this[`list_data${val}`][0],
                    };
                    data.projectData.map((v) => {
                        v.serv_left = Number(v.serv_left);
                        v.serv_qty = 1;
                    });
                    this.goAppointment(data);
                } else {
                    this[`list_data${val}`][0].acitve = true;
                    this.getDetailFun(this[`list_data${val}`][0].bookid);
                }
            }
        },
        // 搜索
        searchList() {
            this.emptyListData();
            this.getlistData();
        },
        // 下拉框搜索
        changeList() {
            this.emptyListData();
            this.getlistData();
        },
        // 滚动加载
        loadFun() {
            setTimeout(() => {
                let val = this.activeName;
                if (this[`is_soll_${val}`]) return;
                this[`searchform${val}`].pfrom += 20;
                this.getlistData();
            }, 200);
        },
        // 准备获取列表参数
        getlistData() {
            let val = this.activeName;
            let param = {
                pnum: 20,
            };
            param = Object.assign(param, this[`searchform${val}`]);
            this.getListFun(param);
        },
        // 获取列表
        async getListFun(param) {
            let val = this.activeName;
            this[`is_soll_${val}`] = true;
            let url =
                this.activeName == 3
                    ? config.YY_YUYUE_BOOK_MYORI_LS
                    : config.YY_YUYUE_BOOK_LS;
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1) {
                if (res.data.config && res.data.config.group) {
                    this.group_data =
                        this.group_data.length == 1
                            ? this.group_data.concat(res.data.config.group)
                            : this.group_data;
                }

                if (res.data.config && res.data.config.shop_ls) {
                    res.data.config.shop_ls.map((v) => {
                        v.id = v.shopid;
                    });
                    this.shop_ls_data =
                        this.shop_ls_data.length == 1
                            ? this.shop_ls_data.concat(res.data.config.shop_ls)
                            : this.shop_ls_data;
                }

                if (res.data.config && res.data.config.worker_ls) {
                    res.data.config.worker_ls.map((v) => {
                        v.id = v.staffid;
                    });
                    this.worker_ls_data =
                        this.worker_ls_data.length == 1
                            ? this.worker_ls_data.concat(
                                  res.data.config.worker_ls
                              )
                            : this.worker_ls_data;
                }

                if (res.data.config && res.data.config.ucp_ls) {
                    res.data.config.ucp_ls.map((v) => {
                        v.id = v.uid;
                    });
                    this.ucp_ls_data =
                        this.ucp_ls_data.length == 1
                            ? this.ucp_ls_data.concat(res.data.config.ucp_ls)
                            : this.ucp_ls_data;
                }
                if (res.data.ls) {
                    setTimeout(() => {
                        this[`is_soll_${val}`] = false;
                    }, 200);
                    res.data.ls.map((v) => {
                        v.acitve = false;
                    });
                    this[`list_data${val}`] = this[`list_data${val}`].concat(
                        res.data.ls
                    );

                    if (param.pfrom == 0 && val != 3) {
                        res.data.ls[0].acitve = true;
                        this.getDetailFun(res.data.ls[0].bookid);
                    }
                    if (param.pfrom == 0 && val == 3) {
                        let data = {
                            projectData: [res.data.ls[0].ls[0]],
                            customerInfo: res.data.ls[0],
                        };
                        data.projectData.map((v) => {
                            v.serv_left = Number(v.serv_left);
                            v.serv_qty = 1;
                        });
                        this.goAppointment(data);
                    }
                } else {
                    this[`is_soll_${val}`] = true;
                }

                if (this.activeName == 5) {
                    if (res.data.ls) {
                        res.data.ls.map((v) => {
                            if (v.remark_info) {
                                v.remark_info.score = Number(
                                    v.remark_info.score
                                );
                            }
                        });

                        this.list_data5 = this.list_data5.concat(res.data.ls);
                    } else {
                        this.is_soll_5 = true;
                    }
                }
            }
        },
        // 重置数据
        emptyListData() {
            let val = this.activeName;
            this[`list_data${val}`] = [];
            this[`is_soll_${val}`] = false;
            this[`searchform${val}`].pfrom = 0;
        },
    },
};
</script>

<style lang="scss" scoped>
.appointment-tow {
    margin-left: 0;
    width: 345px;
    border-right: 1px #e8dcdc solid;
    .header-box {
        height: 50px;
        display: flex;
        align-items: center;
        border-bottom: 1px #e8dcdc solid;
        padding: 0 10px;
        .back {
            font-size: 20px;
            margin-right: 10px;
            cursor: pointer;
        }
        .title {
            font-size: 18px;
        }
    }
    .search-box {
    }
    ::v-deep.tab-box {
        // padding: 0 10px;
        // margin-top: 10px;
        margin-top: 65px;
        .el-tabs__header {
            margin-bottom: 0;
        }
        .el-tabs__content {
            overflow: inherit;
        }
        .el-tabs__nav-scroll {
            display: flex;
            justify-content: center;
            .el-tabs__item {
                padding: 0 10px;
                font-size: 12px;
            }
        }
    }
}
</style>